<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" href="./css/style.min.css">
    <style>
        .wechat_fix {
            margin-top: 0!important;
        }
    </style>
</head>
<script type="text/javascript">
    window.onload=function () {
            document.addEventListener('touchstart',function (event) {
                if(event.touches.length>1){
                    event.preventDefault();
                }
            })
            var lastTouchEnd=0;
            document.addEventListener('touchend',function (event) {
                var now=(new Date()).getTime();
                if(now-lastTouchEnd<=300){
                    event.preventDefault();
                }
                lastTouchEnd=now;
            },false)
        }
</script>

<body>
    <div id="goods-pg" class="goods-list cl">
        <header class="cl">
            <div class="nav-bar cl" v-show="header.show">
                <span class="goback arrow_l" @click="goback"></span>
                <span class="page-name" v-cloak>{{shop_name}}会员店</span>
            </div>
            <div class="search-bar">
                <div class="search-inp-wrap cl">
                    <div class="form-col search-inp">
                        <input type="text" v-model="query_arr[8]" placeholder="请输入商品名" @keyup.enter="searchfn">
                        <button type="button" @click="searchfn"><i class="search-ico"></i></button>
                    </div>
                </div>
            </div>
            <div class="sort-wrap cl">
                <div class="price-sort"><span>价格</span><span class="sort" :class="{sortup:!sort_flag}" @click="pricesort"></span></div>
                <div class="filter-wrap" @click="filterfn"><span>筛选</span><span class="filter"></span></div>
            </div>
        </header>
        <div class="main cl" v-cloak>
            <products-list-tpl :list="goodslistdata.data"></products-list-tpl>
            <div class="t-footer">
                <ul class="t-ul-box counts-ul-box">
                    <li><a :href="go_home" class="t-home"><i class=""></i>首页</a></li>
                    <li><a :href="gocate" class="t-classification"><i ></i>分类</a></li>
                    <li>
                        <a :href="go_myCount" class="t-coupon">
                        <!-- <span class="counts" v-cloak >{{cart_counts}}</span> -->
                        <i class=""></i>优惠券</a>
                    </li>
                    <li><a href="#" @click.prevent="gotocart" class="t-shopping-cat"><i></i>购物车<span class="counts" v-if="cart_counts>0">{{cart_counts}}</span></a></li>
                    <li><a :href="go_mycenter" class="t-my"><i ></i>我的</a></li>
                </ul>
            </div>
            <span class="loadmore">{{morehint}}</span>
        </div>
        <div class="popup" :class="{hide:hide_flag}" @click="hidefn" v-cloak>
            <div class="pop-main" :class="{hide:filter_flag}" @click.stop="">
                <div class="filter-pop">
                    <!--                     <div class="row regions">
                        <label class="lbl-col">所在地区：</label>
                        <span class="region-sele">广东省/广州市/海珠区</span>
                        <a href="#"><span class="arrow_r"></span></a>
                    </div> -->
                    <div class="price-range" :class="{wechat_fix:!header.show}">
                        <h4>价格区间</h4>
                        <div class="row">
                            <div class="form-col">
                                <input type="text" v-model="query_arr[3]" placeholder="最低价格" @blur="blurfn(3)">
                            </div>
                            <div class="form-col split">—</div>
                            <div class="form-col">
                                <input type="text" v-model="query_arr[4]" placeholder="最高价格" @blur="blurfn(4)">
                            </div>
                        </div>
                    </div>
                    <div class="brand-wrap" v-if="!cateid">
                        <dl>
                            <dt class="cl">
                                <h4 class="title">品牌</h4>
                                <span class="selected">{{brand_selected}}</span>
                                <span @click="brand_show" class="more"></span>
                            </dt>
                            <dd>
                                <!-- <brand :brandlist="filter_data.brand[i]['list']"  v-for="(filterlist,i) in filter_data.brand"></brand> -->
                                <brand ref="brand" :brandlist="cpufilterbrand" :chkradio="reset_radio" v-on:pass_brandid="compbrandchk"></brand>
                            </dd>
                        </dl>

                    </div>
                    <div class="attr-wrap" v-if="false">
                        <attributes ref="attribute" :attrslist="filter_data" v-on:pass_attr="get_attr"></attributes>
                    </div>

                </div>
                <div class="btns">
                    <a href="#" class="reset" @click.prevent="btn_reset">重置</a><a href="#" class="btn-submit" @click.prevent="btn_submit">确定</a>
                </div>
            </div>
            <div class="pop-main" @click.stop="" :class="{hide:brand_hide}">
                <div class="brand-pop" :class="{wechat_fix:!header.show}">
                    <brand-list ref="brandlist" :brand_all="brand_all" v-on:pass_brand="get_brand"></brand-list>
                </div>
            </div>
            <div class="layer" @click="hidefn" :class="{hide:hide_flag}"></div>
        </div>
        <toast ref="toast"></toast>
        <div class="loading" v-show="loading"></div>
    </div>
    <script type="text/template" id="products-list-tpl">
        <ul class="cl">
            <li class="cl" v-for="(item,i) in list">
            	<a @click="viewDetail(item.goods_id)">
	                <div class="goods-img-wrap"><img :src="item.goods_img1"></div>
	                <div class="goods-info">
	                    <h3 class="goods-title">{{item.goods_name}}</h3>
	                    <p><span class="price"><i>￥</i>{{item.price}}</span></p>
	                    <!-- <p><span class="store-character">{{store_char(i)}}</span></p> -->
	                </div>
            	</a>
            </li>
            <li class="loadmore cl" v-if="more_flag">暂无数据</li>
            <!-- <li class="loadmore cl" >加载更多...</li> -->
        </ul>
    </script>
    <script type="text/template" id="brand">
        <span>
        <label :class="{active:item.brand_id==radiochk}"  v-for="(item,j) in filteredItems" >
        <input type="radio" name="brand" :value="item.brand_id" v-model="radiochk"    @click="brandchk(j,item.brand_name)">{{item.brand_name}}</label>
        </span>
    </script>
    <script type="text/template" id="attributes">
    <div>
        <dl v-for="(attr_item,i) in attrslist.attr">
            <dt class="cl">
                <h4>{{attr_item.attr_name}}</h4>
            </dt>
            <dd>
            <label :class="{active:item.id==radiochk[i]}"  v-for="(item,j) in attr_item.attributevalue" @click="attr_change_fn(i,item.id)">
            <input type="radio" :name="attr_item.id" :value="item.id"  >{{item.attr_value}}</label>            
            </dd>
        </dl>
    </div>
    </script>
    <script type="text/template" id="brand-list">
    <div>
    <div class="pop-title">
    <span class="arrow" @click="brand_goback"></span>
    <span class="pg-title">品牌</span>
    <a href="#" class="btn-confirm" @click.prevent="brand_sele">确定</a>
    </div>
    <div>
        <div class="brand-list-wrap">
            <dl v-for="brandcate in brand_all">
            <dt>
                <h4 :id="brandcate.letter">{{brandcate.letter}}</h4></dt>
            <dd>
                <ul>
                    <li v-for="(brand_item,i) in brandcate.list"><label :class="{active:brand_item.brand_id==radiochk}"><input type="radio" name="brand" :value="brand_item.brand_id"  v-model="radiochk" @click="brandlist_change(i,brand_item.brand_name)">{{brand_item.brand_name}}</label></li>
                </ul>
            </dd>
        </dl>
        </div>
        <div class="brand-nav">
            <ul>
                <li v-for="brand_idx in brand_all"><a :href="'#'+brand_idx.letter" >{{brand_idx.letter}}</a></li>
            </ul>
        </div>
    </div>
        </div>
    </script>

    <script src="./js/lib/vue.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script src="./js/lib/vue-resource.min.js"></script>
    <script src="./js/min/component.min.js"></script>
    <script type="text/javascript" src="./js/src/common.js"></script>
    <script src="./js/min/lodash.min.js"></script>
    <script>
        var page = 1;
        var store_id = APP.getQueryString("storeid");
        var _keyword = APP.getQueryString("keyword");
        var _page = APP.getQueryString("page");
        var _cid = APP.getQueryString("cid");
        var _floor = APP.getQueryString("floor");
        var _minprice = APP.getQueryString("min_price");
        var _maxprice = APP.getQueryString("max_price");
        var _brandid = APP.getQueryString("brand_id");
        var _str = APP.getQueryString("str");
        var _sort = APP.getQueryString("price_sort");
        var cate_id = APP.getQueryString("cid");
        var _query_arr = [store_id, _page, _cid, _minprice, _maxprice, _brandid, _str, _sort, _keyword];
        var toast = new component.popup.toast();
        for (var i = 0; i < _query_arr.length; i++) {
            if (_query_arr[i] == null) {
                _query_arr[i] = ""
            }
        }
        if (_query_arr[8]) {
            _query_arr[8] = decodeURIComponent(_query_arr[8]);
        } else {
            _query_arr[8] = ""
        }

        function sortNum(a, b) {

            return a - b;
        }
        Vue.component("products-list-tpl", {
            template: "#products-list-tpl",
            props: ['list'],
            data: function() {
                return {
                    complist: this.list,
                    goodslink: "goods-detail.html?storeid="
                }
            },
            methods: {
                store_char: function(n) {
                    if (this.list[n].source == "1") {
                        return "自营";
                    } else if (this.list[n].source == "2") {
                        return "第三方";
                    } else if (this.list[n].source == "3") {
                        return "会员店";
                    }
                }
            },
            computed: {
                cpt_goodslink: function() {
                    return this.goodslink + store_id
                },
                more_flag: function() {
                    return this.list == "" ? true : false
                }
            },
            methods: {
                viewDetail: function(gid) {
                    Vue.http.get(APIPHP + 'index.php?r=goods/index/check&storeid=' + store_id + '&id=' + gid, {
                        emulateJSON: true
                    }).then(function(_res) {
                        if (_res.body.error_code == 0) {
                            window.location.href = 'goods-detail.html?storeid=' + store_id + '&id=' + gid;
                        } else {
                            goodslist.$refs.toast.show('该商品已下架');
                        }
                    }.bind(this));
                },
            }
        });
        Vue.component("brand", {
            template: "#brand",
            props: ['brandlist'],
            data: function() {
                return {
                    radiochk: ""
                }
            },
            mounted: function() {

            },
            methods: {
                brandchk: function(m, n) {
                    this.$emit("pass_brandid", this.radiochk, n)
                }
            },
            computed: {
                filteredItems: function() {
                    return this.brandlist.slice(0, 6)
                }
            }
        })
        Vue.component("attributes", {
            template: "#attributes",
            props: ['attrslist', 'idx'],
            data: function() {
                return {
                    radiochk: [],
                    attrchk: [],
                    new_attrchk: []

                }
            },
            mounted: function() {


            },
            methods: {
                attr_change_fn: function(m, n) {
                    this.new_attrchk = [];
                    this.$set(this.radiochk, m, n)
                    this.$set(this.attrchk, m, n)
                    for (var i = 0; i < this.attrchk.length; i++) {
                        if (this.attrchk[i]) {
                            this.new_attrchk.push(this.attrchk[i])
                        }

                    }
                    this.$emit("pass_attr", this.new_attrchk.join(","));
                }
            }
        })
        Vue.component("brand-list", {
            template: "#brand-list",
            props: ['brand_all'],
            data: function() {
                return {
                    radiochk: "",
                    brand_hide: "true"
                }
            },
            methods: {
                brandlist_change: function(m, n) {
                    this.$emit("pass_brand", false, this.radiochk, n);
                },
                brand_sele: function(e) {
                    this.brand_hide = true;
                    this.$emit("pass_brand", this.brand_hide, this.radiochk);
                },
                brand_goback: function() {
                    this.brand_hide = true;
                    this.$emit("pass_brand", this.brand_hide, this.radiochk);
                }

            }

        })
        Vue.component("regions-pop", {
            template: "#regions-pop"
        })
        var goodslist = new Vue({
            el: "#goods-pg",
            data: {
                header: {
                    show: !APP.iswechat()
                },
                sort_flag: true,
                hide_flag: true,
                filter_flag: true,
                brand_hide: true,
                minprice: "",
                maxprice: "",
                goodslistdata: {
                    data:{}
                },
                filter_data: "",
                cpufilterbrand: "",
                brand_all: "",
                reset_radio: "",
                keyword: "",
                cart_counts: 0,
                gocate: "category.html?storeid=" + store_id,
                query_arr: [],
                query_url: "",
                shop_name: '',
                shop_logo: '',
                data_src: "search",
                countpage: 0,
                brand_selected: "",
                loading: true,
                cateid:cate_id,
                morehint:'上滑加载更多'
            },
            mounted: function() {
                APP.init(this, function() {
                    this.shop_name = APP.getCookie('shopname');
                    this.shop_logo = APP.getCookie('shoplogo');
                }.bind(this), function(arg) {
                    this.shop_logo = arg.body.data.shop.shop_logo;
                    this.shop_name = arg.body.data.shop.shop_name;
                }.bind(this));
                this.query_arr = _query_arr;
                var query_key = ['storeid', 'page', 'cid', 'min_price', 'max_price', 'brand_id', 'str', 'price_sort', 'keyword'];
                for (var i = 0; i < _query_arr.length; i++) {
                    this.query_url = this.query_url + "&" + query_key[i] + "=" + _query_arr[i]
                }
                if (_query_arr[2]) {
                    this.data_src = "cate"
                    var _url = APIPHP + "index.php?r=goods/goods-list/list" + this.query_url;
                    Vue.http.get(_url, {

                    }, {
                        emulateJSON: true
                    }).then(function(_res) {
                        goodslist.goodslistdata = _res.body.data;
                        goodslist.loading=false;
                    })
                } else if(_floor){
                    var _url = APIPHP + "index.php?r=home/index/more-floor&storeid="+store_id+"&floor="+_floor;
                    Vue.http.get(_url, {

                    }, {
                        emulateJSON: true
                    }).then(function(_res) {
                        goodslist.goodslistdata.data = _res.body.data;
                        goodslist.loading=false;
                    })
                }else {
                    this.data_src = "search"
                    this.keyword = this.query_arr[8];
                    var keyword = this.keyword;
                    var _url = APIPHP + "index.php?r=goods/goods-list/index" + this.query_url;
                    Vue.http.get(_url, {

                    }, {
                        emulateJSON: true
                    }).then(function(_res) {
                        goodslist.goodslistdata = _res.body.data;
                        goodslist.loading=false;

                    })
                }
                Vue.http.post(APIPHP + "apic?storeid="+store_id).then(function (_res) {
                    console.log(_res.body)
                },function () {
                })
                Vue.http.get(APIJAVA + 'c/mobile/cart/count?shopId=' + store_id).then(function(_res) { //获取购物车数量
                    goodslist.cart_counts = _res.body.obj;
                }, function(_res) {
                    console.log("err")
                });

            },
            component: {
                'toast': toast
            },
            created:function () {
              window.addEventListener('scroll', this.handleScroll);
            },
            destroyed:function () {
              window.removeEventListener('scroll', this.handleScroll);
            },
            methods: {
                handleScroll:function () {
                    if(this.loading) return;
                    if(document.body.scrollHeight - document.body.scrollTop - window.innerHeight < 150){
                        this.loadmore()
                    } 
                },
                goback: function() {
                    window.history.go(-1);
                },
                pwd: function() {
                    console.log("hello!")
                },
                hidefn: function() {
                    this.hide_flag = true;
                    this.brand_hide = true;
                },
                brand_show: function() {
                    this.brand_hide = false;
                },
                get_brand: function(m, n, j) {
                    this.brand_hide = m;
                    this.query_arr[5] = n;
                    this.$refs.brand.radiochk = n;
                    if (j) {
                        this.brand_selected = j;
                    }
                },
                filterfn: function() {
                    this.hide_flag = false;
                    this.filter_flag = false;
                    Vue.http.get(APIPHP + 'index.php?r=goods/goods-list/search&storeid=' + store_id + "&cid=" + _query_arr[2], {

                    }, {
                        emulateJSON: true
                    }).then(function(_res) {
                        goodslist.filter_data = _res.body.data;
                        var new_filter_list = [];
                        if (goodslist.filter_data.brand) {
                            goodslist.brand_all = goodslist.filter_data.brand;
                            for (var i = 0; i < goodslist.filter_data.brand.length; i++) {
                                for (var j = 0; j < goodslist.filter_data.brand[i]['list'].length; j++) {
                                    new_filter_list.push(goodslist.filter_data.brand[i]['list'][j])
                                }
                            }
                            goodslist.cpufilterbrand = new_filter_list;

                        }
                    })
                },
                pricesort: function() {
                    // var tmp_sort=this.sort_flag ? "asc" : "desc";
                    // this.$set(this.query_arr,7,tmp_sort);
                    // if (tmp_sort=="asc") {
                    //     this.goodslistdata.data=_.sortBy(this.goodslistdata.data, function (o) {
                    //           return parseFloat(o.price)
                    //       })
                    // }else if (tmp_sort=="desc"){
                    //     this.goodslistdata.data=_.sortBy(this.goodslistdata.data, function (o) {
                    //           return -parseFloat(o.price)
                    //       })
                    // }
                    // this.sort_flag = !this.sort_flag;
                    page = 1;
                    var tmp_sort = this.sort_flag ? "asc" : "desc";
                    this.$set(this.query_arr, 7, tmp_sort);
                    this.get_data(this.data_src);
                    this.sort_flag = !this.sort_flag;


                },
                compbrandchk: function(m, n) {
                    this.$set(this.query_arr,5,m)
                    this.$refs.brandlist.radiochk = m;
                    this.brand_selected = n;
                },
                btn_reset: function() {
                    this.$set(this.query_arr, 3, "")
                    this.$set(this.query_arr, 4, "")
                    this.$set(this.query_arr, 5, "")
                    this.$set(this.query_arr, 6, "")
                    this.reset_radio = "";
                    this.$refs.brand.radiochk = "";
                    this.$refs.brandlist.radiochk = "";
                    this.$refs.attribute.attrchk = [];
                    this.$refs.attribute.radiochk = [];
                    this.$refs.attribute.new_attrchk = [];
                    this.brand_selected = "";
                },
                btn_submit: function() {
                    var a = this.get_data('cate');
                    goodslist.filter_flag = true;
                    goodslist.hide_flag = true;

                },
                gotocart: function() {
                    if (this.cart_counts == 0) {
                        this.$refs.toast.show("购物车为空,先选购一些商品吧");
                    } else {
                        window.location.href = "cart.html?storeid=" + store_id+"&version="+APP.version
                    }
                },
                searchfn: function() {
                    this.get_data('search');
                },
                get_attr: function(m) {
                    this.query_arr[6] = m;
                },
                loadmore: function() {
                    this.get_data(this.data_src, true)
                },
                blurfn: function(m) {
                    var _regex = /^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/;
                    if (!_regex.test(this.query_arr[m])&&this.query_arr[m]!="") {
                        this.$refs.toast.show("金额输入格式不正确，请重新输入", 3000);
                        setTimeout(function() {
                            this.$set(this.query_arr, m, "")
                        }, 3000)
                    }
                },

                get_data: function(src, load) {
                    goodslist.loading=true;
                    var _url = "";
                    this.query_url = "";
                    var query_key = ['storeid', 'page', 'cid', 'min_price', 'max_price', 'brand_id', 'str', 'price_sort', 'keyword'];

                    switch (src) {
                        case 'cate':
                            _url = APIPHP + "index.php?r=goods/goods-list/list";
                            goodslist.data_src = 'cate';
                            break;
                        case 'search':
                            _url = APIPHP + "index.php?r=goods/goods-list/index";
                            goodslist.data_src = 'search';
                            break;
                        case 'filter':
                            _url = APIPHP + "index.php?r=goods/goods-list/search";
                            goodslist.data_src = 'filter';
                            break;
                    }
                    if (load) {
                        page++;
                        if (this.goodslistdata.count_page>0&&this.goodslistdata.count_page<page) {
                            goodslist.loading=false;
                            goodslist.morehint="没有更多了"
                            return false;
                        }
                        this.countpage = page;
                        this.$set(this.query_arr, 1, page)
                        for (var i = 0; i < _query_arr.length; i++) {
                            this.query_url = this.query_url + "&" + query_key[i] + "=" + this.query_arr[i]
                        }
                        var result = '';
                        Vue.http.get(_url + goodslist.query_url, {}, {
                            emulateJSON: true
                        }).then(function(_res) {
                            var arrLen = _res.body.data.data.length;
                            if (arrLen > 0) {
                                result = _res.body.data.data
                                var tmpdata = goodslist.goodslistdata.data;
                                goodslist.goodslistdata.data = tmpdata.concat(result);
                            }
                            goodslist.loading=false;
                        })
                    } else {
                        page = 1;
                        this.$set(this.query_arr, 1, "")
                        this.countpage = 0;
                        for (var i = 0; i < _query_arr.length; i++) { //拼装数据地址
                            this.query_url = this.query_url + "&" + query_key[i] + "=" + this.query_arr[i]
                        }
                        console.log(this.query_url)
                        Vue.http.get(_url + goodslist.query_url, {

                        }, {
                            emulateJSON: true
                        }).then(function(_data) {
                            goodslist.goodslistdata="";
                            goodslist.goodslistdata = _data.body.data; 
                            goodslist.loading=false;
                            return _data;
                        })
                    }
                }
            },
            computed: {
                go_mycenter: function() {
                    return "personal-center.html?storeid=" + store_id
                },
                go_home:function () {
                    return "home.html?storeid=" + store_id
                },
                go_myCount:function () {
                     return "c-call-center.html?storeid=" + store_id
                }
            }
        })
    </script>
</body>

</html>